<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>css-notes</title>
  <style type="text/css">
    p {
      border: red solid thin;
    }

    p.dotted { outline-style: dotted }

    p.dashed { outline-style: dashed }

    p.solid { outline-style: solid }

    p.double { outline-style: double }

    p.groove { outline-style: groove }

    p.ridge { outline-style: ridge }

    p.inset { outline-style: inset }

    p.outset { outline-style: outset }
  </style>
</head>
<body>
<p class="dotted">A dotted outline</p>
<p class="dashed">A dashed outline</p>
<p class="solid">A solid outline</p>
<p class="double">A double outline</p>
<p class="groove">A groove outline</p>
<p class="ridge">A ridge outline</p>
<p class="inset">An inset outline</p>
<p class="outset">An outset outline</p>
</body>
</html>
